Breadcrumbs: 11 Design Guidelines for Desktop and Mobile麵包屑導航
麵包屑導航的定義與功能
麵包屑導航是一組連結，表示當前頁面及其“上級頁面”（祖先頁面）的路徑，通常一直延伸至首頁。這些連結反映了頁面在網站層級結構中的位置。麵包屑通常顯示在頁面頂部，位於全域性導航之下，用符號（如“>”或“/”）分隔連結。我們建議使用“>”，雖然兩者在功能上沒有區別。
示例：REI 的麵包屑導航位於全域性導航之下，顯示當前頁面在網站層級結構中的位置。
麵包屑的作用包括：
- 路徑查詢：使用者直接從搜尋引擎或外部連結進入深層頁面時，麵包屑能幫助他們瞭解當前頁面的位置。
- 導航到更廣泛內容：深層頁面內容通常較為具體，而麵包屑導航可以引導使用者訪問當前頁面的上級或更廣泛的內容。
桌面端麵包屑導航的設計指南
1. 麵包屑導航應補充其他導航方式，而非取代它們
麵包屑是對全域性導航（如頂部導航欄）和區域性導航（如側邊欄）的補充，而非替代。獨立設計區域性導航 UI，可以更有效地支援使用者在站點內橫向瀏覽。
反例：Travelsouthdakota 的麵包屑不僅顯示層級關係，還試圖作為區域性導航的功能。這種設計混淆了兩種導航的目的。
2. 麵包屑應顯示頁面的層級結構，而非使用者會話路徑
麵包屑反映頁面在網站中的層級位置，而非使用者在訪問過程中的歷史路徑（類似瀏覽器的返回按鈕功能）。會話路徑可能過長或重複，對使用者沒有實際幫助。
3. 多層級網站中，麵包屑應顯示單一路徑
對於有多個父級頁面的頁面（如多層級分類），應選擇一個“規範路徑”作為麵包屑顯示，而不是顯示多個路徑，以避免混亂。
4. 當前頁面應作為麵包屑路徑中的最後一項，但不可為連結
麵包屑路徑的最後一項表示當前頁面，不應是可點選的連結，並需與前面的連結在視覺上區分開。
反例：British Red Cross 的麵包屑中，連結與非連結項未在視覺上進行區分，可能會讓使用者感到困惑。
5. 僅包含實際頁面，不包含邏輯分類
麵包屑中的每一項都應指向一個實際頁面，不能僅作為分類標籤存在。使用者期待點選麵包屑即可訪問對應頁面。
示例：Newegg 的全域性導航包含邏輯分類（如“商業網路”），但該分類沒有獨立頁面，因此不在麵包屑中顯示。
6. 扁平層級或線性結構的網站無需麵包屑
如果網站層級較淺（如只有1–2層）或結構線性，麵包屑的價值不大。
示例：
MIT 網站層級結構扁平，主導航已足夠顯示頁面位置，無需麵包屑。
NPR 的線性專題內容也無需麵包屑，因為使用者會按順序逐頁訪問。
7. 麵包屑路徑應從首頁開始
麵包屑路徑的第一個連結應指向網站首頁，通常標註為“首頁（Home）”。不過，避免在全域性導航和麵包屑中重複顯示首頁連結，任選其一即可。
移動端麵包屑導航的設計指南
1. 避免多行麵包屑導航
在移動端，麵包屑容易因層級過多而換行，佔用寶貴的螢幕空間。多行導航既影響視覺清晰度，又降低導航效率。
反例：REI 的移動端麵包屑佔用過多空間，將產品標題推到了頁面摺疊線以下。
2. 避免麵包屑過小或過密
為節省空間，過小的麵包屑連結可能不便於觸控，影響使用者操作。觸控目標區域至少應為1釐米 × 1釐米。
3. 考慮縮短麵包屑路徑
在移動端，可以僅顯示最後一層級的麵包屑連結，以滿足常見的導航需求，同時節省螢幕空間。例如，使用者在電商網站上從搜尋引擎進入產品詳情頁，通常只需返回上一級分類頁面即可。
示例：
移動端： Bestbuy 移動端僅顯示直接父級分類的連結。
桌面端： 桌面端則顯示完整的麵包屑路徑。
